<template>
  <view class="container">
    <view class="form-title">法律援助申请</view>
    <text class="form-desc">请如实填写以下信息，我们将尽快与您联系</text>

    <form class="aid-form" @submit="onSubmit">
      <view class="form-group">
        <text class="form-label required">姓名</text>
        <input 
          type="text" 
          name="name"
          placeholder="请输入您的姓名" 
          class="form-input"
          v-model="formData.name"
        />
      </view>

      <view class="form-group">
        <text class="form-label required">身份证号</text>
        <input 
          type="text" 
          name="idCard"
          placeholder="请输入您的身份证号" 
          class="form-input"
          v-model="formData.idCard"
        />
      </view>

      <view class="form-group">
        <text class="form-label required">联系电话</text>
        <input 
          type="number" 
          name="phone"
          placeholder="请输入您的手机号码" 
          class="form-input"
          v-model="formData.phone"
        />
      </view>

      <view class="form-group">
        <text class="form-label">紧急联系人</text>
        <input 
          type="text" 
          name="emergencyContact"
          placeholder="请输入紧急联系人姓名" 
          class="form-input"
          v-model="formData.emergencyContact"
        />
      </view>

      <view class="form-group">
        <text class="form-label">紧急联系人电话</text>
        <input 
          type="number" 
          name="emergencyPhone"
          placeholder="请输入紧急联系人电话" 
          class="form-input"
          v-model="formData.emergencyPhone"
        />
      </view>

      <view class="form-group">
        <text class="form-label required">援助类型</text>
        <picker 
          name="aidType"
          @change="onAidTypeChange" 
          :value="formData.aidTypeIndex" 
          :range="aidTypeOptions"
        >
          <view class="picker">{{ formData.aidTypeIndex === 0 ? '请选择援助类型' : aidTypeOptions[formData.aidTypeIndex] }}</view>
        </picker>
      </view>

      <view class="form-group">
        <text class="form-label required">案件描述</text>
        <textarea 
          name="caseDescription"
          placeholder="请详细描述您遇到的法律问题或案件情况" 
          class="form-textarea"
          v-model="formData.caseDescription"
          :maxlength="500"
        ></textarea>
        <text class="textarea-count">{{ formData.caseDescription.length }}/500</text>
      </view>

      <view class="form-group">
        <text class="form-label">其他说明</text>
        <textarea 
          name="otherInfo"
          placeholder="如有其他需要说明的情况，请在此填写" 
          class="form-textarea"
          v-model="formData.otherInfo"
          :maxlength="200"
        ></textarea>
        <text class="textarea-count">{{ formData.otherInfo.length }}/200</text>
      </view>

      <button class="submit-btn" form-type="submit">提交申请</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      aidTypeOptions: [
        '请选择援助类型',
        '民事纠纷',
        '刑事案件',
        '行政诉讼',
        '劳动争议',
        '婚姻家庭',
        '遗产继承',
        '其他'
      ],
      formData: {
        name: '',
        idCard: '',
        phone: '',
        emergencyContact: '',
        emergencyPhone: '',
        aidTypeIndex: 0, // 0 为 "请选择援助类型"
        caseDescription: '',
        otherInfo: '',
      }
    };
  },
  methods: {
    onAidTypeChange(e) {
      this.formData.aidTypeIndex = parseInt(e.detail.value);
    },
    onSubmit(e) {
      // 表单验证
      if (!this.validateForm()) {
        return;
      }

      // 模拟提交流程
      uni.showLoading({
        title: '提交中...'
      });

      // 实际项目中，这里应该调用 uni.request 发送数据到后端
      // uni.request({
      //   url: 'https://your-api.com/submit-legal-aid',
      //   method: 'POST',
      //   data: this.getSubmitData(),
      //   success: (res) => {
      //     if (res.statusCode === 200) {
      //       uni.showToast({
      //         title: '申请提交成功',
      //         icon: 'success'
      //       });
      //       // 可以清空表单或跳转到成功页面
      //     } else {
      //       uni.showToast({
      //         title: '提交失败',
      //         icon: 'error'
      //       });
      //     }
      //   },
      //   fail: (err) => {
      //     console.error('提交失败:', err);
      //     uni.showToast({
      //       title: '网络错误',
      //       icon: 'error'
      //     });
      //   },
      //   complete: () => {
      //     uni.hideLoading();
      //   }
      // });

      // 模拟提交成功
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '申请提交成功',
          icon: 'success',
          duration: 2000
        });

        // 提交成功后可以清空表单或跳转
        // this.resetForm();
        // uni.navigateTo({ url: '/pages/aid-success/aid-success' });
      }, 1500);
    },
    validateForm() {
      if (!this.formData.name.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.idCard.trim()) {
        uni.showToast({
          title: '请输入身份证号',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.phone.trim()) {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none'
        });
        return false;
      }
      if (this.formData.aidTypeIndex === 0) {
        uni.showToast({
          title: '请选择援助类型',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.caseDescription.trim()) {
        uni.showToast({
          title: '请输入案件描述',
          icon: 'none'
        });
        return false;
      }
      return true;
    },
    getSubmitData() {
      // 处理提交数据，例如将索引转为实际值
      return {
        name: this.formData.name,
        idCard: this.formData.idCard,
        phone: this.formData.phone,
        emergencyContact: this.formData.emergencyContact,
        emergencyPhone: this.formData.emergencyPhone,
        aidType: this.aidTypeOptions[this.formData.aidTypeIndex],
        caseDescription: this.formData.caseDescription,
        otherInfo: this.formData.otherInfo,
      };
    },
    resetForm() {
      this.formData = {
        name: '',
        idCard: '',
        phone: '',
        emergencyContact: '',
        emergencyPhone: '',
        aidTypeIndex: 0,
        caseDescription: '',
        otherInfo: '',
      };
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10rpx;
}

.form-desc {
  font-size: 26rpx;
  color: #666;
  text-align: center;
  margin-bottom: 40rpx;
}

.aid-form {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.form-label.required::after {
  content: '*';
  color: #f44336;
  margin-left: 4rpx;
}

.form-input {
  width: 100%;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.picker {
  width: 100%;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  background-color: #fff;
  color: #333;
}

.form-textarea {
  width: 100%;
  padding: 15rpx 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  height: 180rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.textarea-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.submit-btn {
  width: 100%;
  padding: 20rpx;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 10rpx;
  font-size: 30rpx;
  margin-top: 20rpx;
}
</style>
